<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>聊天对话-农业知识交流论坛</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/mycss.css}">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2080705_jiuqmw0ynch.css">
    <style>
        .chat-container {
            height: 600px;
            display: flex;
            flex-direction: column;
        }
        .chat-header {
            padding: 15px;
            border-bottom: 1px solid #eee;
            background-color: #f8f9fa;
        }
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
        }
        .message {
            margin-bottom: 15px;
            display: flex;
            flex-direction: column;
        }
        .message.sent {
            align-items: flex-end;
        }
        .message.received {
            align-items: flex-start;
        }
        .message-content {
            max-width: 70%;
            padding: 10px 15px;
            border-radius: 15px;
            margin-top: 5px;
        }
        .sent .message-content {
            background-color: #007bff;
            color: white;
        }
        .received .message-content {
            background-color: #e9ecef;
        }
        .message-time {
            font-size: 12px;
            color: #6c757d;
            margin-top: 5px;
        }
        .chat-input {
            padding: 15px;
            border-top: 1px solid #eee;
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
<div th:replace="~{common/header::header}"></div>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="chat-container">
                    <div class="chat-header">
                        <div class="d-flex align-items-center">
                            <a href="/chat" class="mr-3">
                                <i class="layui-icon layui-icon-return"></i>
                            </a>
                            <img th:src="${otherUser.avatar}" class="rounded-circle mr-2" style="width: 40px; height: 40px;">
                            <h5 class="mb-0" th:text="${otherUser.nickname}">用户名</h5>
                        </div>
                    </div>
                    
                    <div class="chat-messages" id="chat-messages">
                        <div th:each="message : ${messages}" 
                             th:class="${message.senderUid == session.loginUser.uid ? 'message sent' : 'message received'}">
                            <div class="message-content" th:text="${message.msgContent}">消息内容</div>
                            <div class="message-time" th:text="${#dates.format(message.msgTime, 'yyyy-MM-dd HH:mm')}">时间</div>
                        </div>
                    </div>
                    
                    <div class="chat-input">
                        <form id="message-form" class="d-flex">
                            <input type="text" id="message-input" class="form-control mr-2" placeholder="输入消息...">
                            <button type="submit" class="btn btn-primary">发送</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="~{common/footer::footer}"></div>

<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/layui/layui.all.js}"></script>
<script>
    $(document).ready(function() {
        const chatMessages = $('#chat-messages');
        const messageForm = $('#message-form');
        const messageInput = $('#message-input');
        const otherUid = '[[${otherUser.uid}]]';
        
        // 滚动到底部
        function scrollToBottom() {
            chatMessages.scrollTop(chatMessages[0].scrollHeight);
        }
        
        // 初始滚动到底部
        scrollToBottom();
        
        // 发送消息
        messageForm.submit(function(e) {
            e.preventDefault();
            const content = messageInput.val().trim();
            if (!content) return;
            
            $.post('/chat/send', {
                receiverUid: otherUid,
                content: content
            }, function(response) {
                if (response === 'success') {
                    // 添加新消息到聊天界面
                    const now = new Date();
                    const timeStr = now.getFullYear() + '-' + 
                                  String(now.getMonth() + 1).padStart(2, '0') + '-' +
                                  String(now.getDate()).padStart(2, '0') + ' ' +
                                  String(now.getHours()).padStart(2, '0') + ':' +
                                  String(now.getMinutes()).padStart(2, '0');
                    
                    const messageHtml = `
                        <div class="message sent">
                            <div class="message-content">${content}</div>
                            <div class="message-time">${timeStr}</div>
                        </div>
                    `;
                    chatMessages.append(messageHtml);
                    
                    // 清空输入框并滚动到底部
                    messageInput.val('');
                    scrollToBottom();
                } else {
                    alert(response);
                }
            });
        });
        
        // 定期检查新消息
        setInterval(function() {
            $.get('/chat/' + otherUid, function(response) {
                const parser = new DOMParser();
                const doc = parser.parseFromString(response, 'text/html');
                const newMessages = $(doc).find('.message.received');
                
                if (newMessages.length > 0) {
                    chatMessages.append(newMessages);
                    scrollToBottom();
                }
            });
        }, 5000);
    });
</script>
</body>
</html> 